import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:vdrag_saas/Utils.dart';
import 'package:vdrag_saas/config.dart';
import 'package:vdrag_saas/detail/gv_video_player.dart';
import 'package:visibility_detector/visibility_detector.dart';

class FullscreenImageViewer extends StatelessWidget {
  List<String> pictures = [];
  int index = 0;

  FullscreenImageViewer(
      {super.key, required this.pictures, required this.index});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: PhotoViewGallery.builder(
            // enableRotation: true,
            backgroundDecoration: const BoxDecoration(color: Color(0xffF1F1F1)),
            itemCount: pictures.length,
            pageController: PageController(initialPage: index),
            builder: (BuildContext context, int _index) {
              return PhotoViewGalleryPageOptions(
                  imageProvider:
                      NetworkImage(HttpConfig.baseUrl + pictures[_index]),
                  initialScale: PhotoViewComputedScale.contained,
                  minScale: PhotoViewComputedScale.contained * 1.0,
                  maxScale: PhotoViewComputedScale.covered * 3.0);
            }),
      ),
    );
  }
}

class _Media {
  String url;
  String type;
  int index = 0;
  _Media(this.url, this.type, this.index);
}

class MediaList extends StatelessWidget {
  List<String> pictures = [];
  List<String> videos = [];
  MainAxisAlignment contextTitleAlign = MainAxisAlignment.start;

  MediaList({super.key, required this.pictures, required this.videos});

  Widget buildMedia(_Media media, int index) {
    if (media.type == 'image') {
      return FadeInImage(
          image: NetworkImage(HttpConfig.baseUrl + media.url),
          placeholder: const AssetImage('assets/images/loading.gif'),
          fit: BoxFit.fill);
    }
    final GlobalKey<GvVideoPlayerState> _key = GlobalKey<GvVideoPlayerState>();
    GvVideoPlayer video = GvVideoPlayer(media.url, autoPlay: index == 0);
    return video;
  }

  @override
  Widget build(BuildContext context) {
    bool isMobile = Utils.isMobile(context);
    if (isMobile) {
      contextTitleAlign = MainAxisAlignment.center;
    } else {
      contextTitleAlign = MainAxisAlignment.start;
    }
    if (pictures.isEmpty) {
      return Container();
    }
    List<_Media> medias = [];
    int index = 0;
    for (var i = 0; i < videos.length; i++) {
      _Media media = _Media(videos[i], "video", index++);
      medias.add(media);
    }
    for (var i = 0; i < pictures.length; i++) {
      _Media media = _Media(pictures[i], "image", index++);
      medias.add(media);
    }
    return Container(
        // width: double.infinity,
        constraints: BoxConstraints(
            minHeight: isMobile ? 180 : 600,
            maxHeight: isMobile ? 180 : 600,
            maxWidth: 1920),
        child: Row(
          children: [
            Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: medias
                      .map((media) => GestureDetector(
                            onTap: () {
                              if (media.type == 'video') {
                                return;
                              }
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => FullscreenImageViewer(
                                      pictures: pictures,
                                      index: media.index - videos.length),
                                ),
                              );
                            },
                            child: Container(
                              padding:
                                  const EdgeInsetsDirectional.only(end: 10),
                              child: Container(
                                decoration: BoxDecoration(
                                    border: Border.all(
                                        color: const Color(0xffbbbbbb),
                                        width: 1)),
                                child: buildMedia(media, media.index),
                              ),
                            ),
                          ))
                      .toList(),
                ),
              ),
            ),
          ],
        ));
  }
}
